<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mounted</title>
</head>
<body>
<div id="app">
  <p ref="myP">{{ msg }}</p>

  <div ref="wrap">
    <div v-for="i in arr" ref="mydiv">{{i}}</div>
  </div>

</div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    // this.$data vm上的数据
    // this.$watch 监控
    //  this.$el  当前元素
    //  this.$set 后加的属性实现相应变化
    //  this.$options vm上的所有属性
    //  this.$nextTick()  异步方法 等待dom 完成后获取
    //  this.$refs  //如果dom元素不是通过v-for循环出来的，只能获取一个，通过v-for循环出来的可以获取多个
   let vm =  new Vue({
        el: '#app',
        data:{
            msg:'hello world!',
            arr:[1,2,3]
        },
        mounted(){
          console.log(this.$refs.myP);

          console.log(this.$refs.mydiv);

          this.arr = [1,2,3,4,5]  //dom 渲染是异步的

          this.$nextTick(()=>{  //如果数据变化后想获取真实dom 的内容，需要等待页面渲染完毕后再获取，所有的dom操作，最好nextTick中
            console.log(this.$refs.wrap);
          })


        }
    })

    console.log(vm);
</script>
</html>
